/**
 * Created by Ysssssss on 20/3/27.
 */


import React, { PureComponent } from 'react'
import PropTypes from 'prop-types';

import { CheckCircleFilled } from '@ant-design/icons'

class ColorRadio extends PureComponent {
    static propTypes = {
        colorList: PropTypes.array,
        onChange: PropTypes.func,
        value: PropTypes.string
    }

    constructor(props) {
        super(props);

        this.handleColorChange = this.handleColorChange.bind(this)
    }

    handleColorChange (e) {
        const value = e.currentTarget.dataset.color
        this.props.onChange(value)
    }

    render () {
        const { colorList, value } = this.props
        return (
            <div className="color-radio-container">
                { colorList.map(color => (
                    <div key={ color.value }
                         data-color={ color.value }
                         className={`color-radio-item${value === color.value ? ' selected' : ''}`}
                         onClick={this.handleColorChange}
                    >
                        <div className="color-preview" style={{backgroundColor: color.value}} />
                        <div className="color-name">{ color.name }</div>
                        <CheckCircleFilled className="selected-icon" />
                    </div>
                )) }
            </div>
        )
    }
}

export default ColorRadio